<template>
  <button
    :class="[
      'db-button',
      `db-button--${variant}`,
      `db-button--${size}`,
      {
        'db-button--loading': loading,
        'db-button--icon-only': !$slots.default && icon,
        'db-button--block': block
      }
    ]"
    :disabled="disabled || loading"
    @click="handleClick"
  >
    <span v-if="loading" class="db-button__loader">
      <svg class="db-button__spinner" viewBox="0 0 20 20">
        <circle cx="10" cy="10" r="8" stroke-width="2" fill="none" />
      </svg>
    </span>
    
    <span v-else-if="icon" class="db-button__icon">
      <component :is="icon" />
    </span>
    
    <span v-if="$slots.default" class="db-button__content">
      <slot />
    </span>
  </button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'success'
type ButtonSize = 'sm' | 'md' | 'lg'

interface ButtonProps {
  variant?: ButtonVariant
  size?: ButtonSize
  icon?: any
  loading?: boolean
  disabled?: boolean
  block?: boolean
}

const props = withDefaults(defineProps<ButtonProps>(), {
  variant: 'primary',
  size: 'md',
  loading: false,
  disabled: false,
  block: false
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

function handleClick(event: MouseEvent) {
  if (!props.loading && !props.disabled) {
    emit('click', event)
  }
}
</script>

<style scoped>
.db-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-family: inherit;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
  white-space: nowrap;
  user-select: none;
}

/* Sizes */
.db-button--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.db-button--md {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

.db-button--lg {
  height: 42px;
  padding: 0 20px;
  font-size: 16px;
}

/* Icon only */
.db-button--icon-only {
  padding: 0;
  aspect-ratio: 1;
}

.db-button--icon-only.db-button--sm {
  width: 32px;
}

.db-button--icon-only.db-button--md {
  width: 36px;
}

.db-button--icon-only.db-button--lg {
  width: 42px;
}

/* Block */
.db-button--block {
  width: 100%;
}

/* Variants */
.db-button--primary {
  background-color: var(--primary-600);
  color: white;
}

.db-button--primary:hover:not(:disabled) {
  background-color: var(--primary-700);
}

.db-button--primary:active:not(:disabled) {
  background-color: var(--primary-800);
}

.db-button--secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.db-button--secondary:hover:not(:disabled) {
  background-color: var(--bg-tertiary);
}

.db-button--ghost {
  background-color: transparent;
  color: var(--text-secondary);
}

.db-button--ghost:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.db-button--danger {
  background-color: var(--error);
  color: white;
}

.db-button--danger:hover:not(:disabled) {
  filter: brightness(0.9);
}

.db-button--success {
  background-color: var(--success);
  color: white;
}

.db-button--success:hover:not(:disabled) {
  filter: brightness(0.9);
}

/* States */
.db-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.db-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--primary-500-rgb), 0.2);
}

/* Loading */
.db-button--loading {
  cursor: wait;
  color: transparent;
}

.db-button__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.db-button__spinner {
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
}

.db-button__spinner circle {
  stroke: currentColor;
  stroke-dasharray: 40;
  stroke-dashoffset: 10;
}

.db-button--primary .db-button__spinner circle,
.db-button--danger .db-button__spinner circle,
.db-button--success .db-button__spinner circle {
  stroke: white;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Icon */
.db-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
}

.db-button__icon svg {
  width: 100%;
  height: 100%;
}
</style> 